<!doctype html>
<html lang="en">
  <head>
    <style type="text/css">

    body {
      font-family: Helvetica, Arial, sans-serif;
    }

    form {
      max-width: 500px;
    }

    label,
    textarea {
      display: block;
      margin-bottom: 1em;
    }

    textarea {
      width: 100%;
      font-size: inherit;
    }

    button {
      padding: 0.6em 1em;
      border: 0;
      background-color: hsl(220, 50%, 50%);
      color: white;
      font: inherit;
      transition: background-color 0.3s linear;
    }
    button:hover {
      background-color: hsl(220, 45%, 40%);
    }

    button.is-loading {
      position: relative;
      color: transparent;
    }
    button.is-loading::after {
      position: absolute;
      content: "";
      display: block;
      width: 1.4em;
      height: 1.4em;
      top: 50%;
      left: 50%;
      margin-left: -0.7em;
      margin-top: -0.7em;
      border-top: 2px solid white;
      border-radius: 50%;
      animation: spin 0.5s linear infinite;
    }

    .shake {
      animation: shake 0.7s linear;
    }

    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

    @keyframes shake {
      0%,
      100% {
        transform: translateX(0);
      }
      10%,
      30%,
      50%,
      70% {
        transform: translateX(-0.4em);
      }
      20%,
      40%,
      60% {
        transform: translateX(0.4em);
      }
      80% {
        transform: translateX(0.3em);
      }
      90% {
        transform: translateX(-0.3em);
      }
    }
    </style>
  </head>
  <body>
    <form>
      <label for="trip">Tell us about your first trip to the zoo:</label>
      <textarea id="trip" name="about-my-trip" rows="5"></textarea>
      <button type="submit" id="submit-button" class="shake">Save</button>
    </form>

<script type="text/javascript">
var input = document.getElementById('trip');
var button = document.getElementById('submit-button');

button.addEventListener('click', function(event) {
  event.preventDefault();
  button.classList.add('is-loading');
  button.disabled = true;
  input.disabled = true;
});
</script>
  </body>
</html>
